<template>
  <div>
    <div class="top">
      <div class="headDiv">
        <img class="head" :src="data.avatar" alt />
      </div>
      <div class="headInfo">
        <p>会员名称：{{data.username}}</p>
        <p>会员手机号：{{newMobile}}</p>
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div>
          <span>真实姓名</span>
          <p>{{newName}}</p>
        </div>
        <div>
          <span>会员编号</span>
          <p>{{data.customerId}}</p>
        </div>
        <div>
          <span>状态</span>
          <p>{{data.state === '0' ? '已认证' : '未认证'}}</p>
        </div>
        <div>
          <span>积分数量</span>
          <p>{{data.integral}}</p>
        </div>
        <div>
          <span>爱豆豆数量</span>
          <p>{{data.pension}}</p>
        </div>
        <div>
          <span>身份证</span>
          <p>{{newIdCard}}</p>
        </div>
        <div>
          <span>邮箱</span>
          <p>{{data.email === null ? '-' : data.email}}</p>
        </div>
        <div>
          <span>信用</span>
          <p>{{data.credit}}</p>
        </div>
        <div>
          <span>服务商编号</span>
          <p>{{data.providerId}}</p>
        </div>
        <div>
          <span>性别</span>
          <p>{{data.sex === 'M' ? '男' : data.sex === 'W' ? '女' : '保密'}}</p>
        </div>
        <div>
          <span>登录IP</span>
          <p>{{data.loginIp}}</p>
        </div>
        <div>
          <span>上次登录时间</span>
          <p>{{data.loginDate}}</p>
        </div>
        <div>
          <span>创建时间</span>
          <p>{{data.createDate}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FIND_CUSTOMER_INFO_API_NEW } from '@/api'

export default {
  components: {},

  data () {
    return {
      customerId: '',
      data: {}
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    newMobile () {
      return this.phone(this.data.mobile)
    },
    newName () {
      return this.nameZ(this.data.realName)
    },
    newIdCard () {
      return this.idCard(this.data.idCard)
    }
  },
  onShow () {
    this.init()
    this._getVipAdminInfo()
  },
  methods: {
    _getVipAdminInfo () {
      const vm = this
      FIND_CUSTOMER_INFO_API_NEW(vm.customerId, 'SHOP')
        .then(r => {
          if (r.data.code === '0') {
            vm.data = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 获取用户信息
    phone (val) {
      if (val) {
        return val.substr(0, 3) + '****' + val.substr(7)
      } else {
        return '-'
      }
    },
    nameZ (val) {
      if (val) {
        let len = this.data.realName.length - 1
        let xin = ''
        for (let i = 0; i < len; i++) {
          xin += '*'
        }
        return val.substr(0, 1) + xin
      } else {
        return '-'
      }
    },
    idCard (val) {
      if (val) {
        return val.substr(0, 6) + '********' + val.substr(14)
      } else {
        return '-'
      }
    },
    init () {
      this.customerId = this.$root.$mp.query.customerId
      this.data = {}
    }
  }
}
</script>

<style lang="scss">
.top {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #efeef3;
  .headDiv {
    width: 25%;
    display: flex;
    justify-content: center;
    .head {
      width: 60px;
      height: 60px;
      border-radius: 50px;
    }
  }
  .headInfo {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 15px;
    color: #000;
  }
}
.content {
  width: 340px;
  margin: auto;

  .list {
    div {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #000;
      p {
        color: #939393;
      }
    }
  }
}
</style>
